<script setup>
import { ref,onMounted } from 'vue'
import { queryWarehouseArea,addWarehouseArea,queryWarehouseAreaById,updateWarehouseArea,deleteWarehouseArea } from '../../api/warehousearea'
import { queryWarehouseAll } from '../../api/warehouse'
import { ElMessage } from 'element-plus'

//仓库区域数据集合，有id和name两个属性
const warehouseAreaNameList = ref([{name:'存储区'},{name:'拣货区'},{name:'收货区'},{name:'发货区'}])
//仓库的数据集合，有id和name两个属性
const warehouseList = ref([])
const getWarehouseAll =async () =>{
  const result = await queryWarehouseAll()
  warehouseList.value = result.data
}
//定义table数据
const warehouseAreaList = ref([])
//条件分页查询
const query = async () => { 
  const result = await queryWarehouseArea(page.value,pageSize.value,warehouseAreaDate.value.warehouseName,warehouseAreaDate.value.name)
    warehouseAreaList.value = result.data.rows
    total.value = result.data.total
}

//表单数据
const warehouseAreaDate = ref({warehouseName:'',name:''})
//定义清空表单的点击事件
const clear = () => { 
  warehouseAreaDate.value = {warehouseName:'',name:''}
  query()
}

//定义分页的变量
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
//定义分页的点击事件
const handleSizeChange = (val) => {
  page.value = 1
  query()
}
const handleCurrentChange = (val) => {
  query()
}
//挂载
onMounted(() => {
  getWarehouseAll()
  query()
})
//定义弹出框数据
const title = ref(null)
const dialogShow = ref(false)
const dialogData = ref({warehouseId:'',name:'',category:'',createBy:'',status:''})

//新增的点击事件
const saveWarehouseArea = () =>{
  title.value = '添加库区'
  dialogShow.value = true
  //清空数据
  dialogData.value = {warehouseId:'',name:'',category:'',createBy:'',status:''}
}

//保存库区的点击事件
const saveWarehouseAreaInfo = async () => { 
  let result = null
  if(dialogData.value.id){
    //修改仓库信息
    result = await updateWarehouseArea(dialogData.value)
  }else{
    //添加仓库信息
    result = await addWarehouseArea(dialogData.value)
  }
  if(result.code){
    ElMessage.success('操作成功！')
    dialogShow.value = false
    query()
  }else{
    ElMessage.error('操作失败！请重新操作')
  }
}

//回显查询
const edit = async (id)=>{ 
  dialogShow.value = true
  title.value = '修改库区'
  const result = await queryWarehouseAreaById(id)
  dialogData.value = result.data
}

//删除
const deleteById = async (id)=>{ 
  const result = await deleteWarehouseArea(id)
  if(result.code){
    ElMessage.success('操作成功！')
    query()
  }else{
    ElMessage.error('操作失败！请重新操作')
  }
}
</script>
<template>
<div><h4>库区管理</h4></div>
<div>
  <el-form :inline="true" :model="warehouseAreaDate" class="demo-form-inline">
    <el-form-item>
      <el-button type="primary" @click="saveWarehouseArea"><el-icon><Plus /></el-icon></el-button>
    </el-form-item>
    <el-form-item>
      <el-input v-model="warehouseAreaDate.warehouseName" placeholder="请输入仓库名称" />
    </el-form-item>
    <el-form-item>
      <el-input v-model="warehouseAreaDate.name" placeholder="请输入库区名称" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="query">查询</el-button>
      <el-button type="default" @click="clear">清空</el-button>
    </el-form-item>
  </el-form>
</div>

<!-- table表格 -->
<div>
  <el-table :data="warehouseAreaList" border style="width: 100%" >
    <el-table-column fixed type="index" label="序号" align="center"  width="100"/>
    <el-table-column prop="warehouseName" label="仓库名称" align="center"  width="200"/>
    <el-table-column prop="name" label="库区名称" align="center" width="150"/>
    <el-table-column prop="category" label="库区类型" align="center" width="150"/>
    <el-table-column prop="createBy" label="创建人" align="center" width="150"/>
    <el-table-column prop="createTime" label="创建时间" align="center" width="200"/>
    <el-table-column label="是否有效" align="center" width="150">
      <template #default="scope">
        <el-tag :type="scope.row.status==1?'success':'danger'">{{ scope.row.status == 1 ? '有效' : '无效' }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" align="center" width="150">
      <template #default="scope">
        <el-button size="small" @click="edit(scope.row.id)"><el-icon><EditPen /></el-icon></el-button>
        <el-button size="small" @click="deleteById(scope.row.id)"><el-icon><Delete /></el-icon></el-button>
      </template>
    </el-table-column>
  </el-table>
</div>

<!-- 分页 -->
<div>
  <el-pagination
  v-model:current-page="page"
  v-model:page-size="pageSize"
  :page-sizes="[5, 10, 15, 20]"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"/>
</div>


<!-- 弹出框 -->
<div>
  <el-dialog v-model="dialogShow" :title="title" width="500" align-center>
    <el-form :model="dialogData">
      <el-form-item :label-width="formLabelWidth">
        <el-select v-model="dialogData.warehouseId" placeholder="请选择仓库">
          <el-option v-for="item in warehouseList" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-input v-model="dialogData.name" placeholder="请输入库区名称" />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-select v-model="dialogData.category" placeholder="请选择库区类型">
          <el-option v-for="item in warehouseAreaNameList" :label="item.name" :value="item.name" />
        </el-select>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-input v-model="dialogData.createBy" placeholder="请输入创建人" />
      </el-form-item>
      <el-form-item label="是否有效" prop="status">
        <el-switch v-model="dialogData.status" :active-value="1" :inactive-value="2" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogShow = false" type="default">取消</el-button>
      <el-button type="primary" @click="saveWarehouseAreaInfo">确定</el-button>
    </template>
  </el-dialog>
</div>
</template>
<style scoped>
</style>